<template>
  <div class="rContainer" style="overflow-x: hidden">
    <p class="title">设施场所概况</p>
    <div v-for="(list, index) in dataList" :key="index" class="bigBox">
      <p>{{ list.title }}</p>
      <div
        v-for="(data, index) in list.children"
        :key="index"
        class="generalBox"
        @click="click"
      >
        <img :src="require('@/assets/设施场所icon/' + data.key + '.png')" />
        <span class="key">{{ data.key }}</span>
        <span class="value">{{ data.value }}个</span>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable */
import pubsub from "pubsub-js";
import axios from "axios";
import url from "@/components/URL.json";
import { getCurrentInstance, onMounted } from "vue-demi";

export default {
  name: "firstRightPage",
  data() {
    return {
      dataList: [],
      data: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      // 读取数据制作列表
      // getData();
      //关闭设施场所表
      pubsub.subscribe("facilityTableShow", (n, data) => {
        if (!data) {
          Array.from(document.querySelectorAll(".generalBox>.key")).forEach(
            (element) => {
              element.style["color"] = "white";
            }
          );
        }
      });
    });

    // 读取数据
    function getData() {
      proxy.dataList = [];
      let dbNameList = ["安防科技", "基础设施", "停车场", "重点场所"];
      dbNameList.forEach((db) => {
        axios({
          method: "get",
          url: url.basicURL + "getFacility",
          params: { db: "3d_" + db },
        }).then((res) => {
          // 制作数据整合表
          dataInput(db, res.data);
          proxy.data.push(res.data);
        });
      });
    }

    // 制作数据整合表
    function dataInput(db, features) {
      let list = {};
      // 标题
      list.title = db;
      list.show = false;
      //  数据列表
      list.children = [];
      let lbList = [features[0]["LB"]];
      let lb = features[0]["LB"];
      features.forEach((feature) => {
        if (feature["LB"] != lb) {
          let isNew = true;
          lbList.forEach((element) => {
            if (element === feature["LB"]) isNew = false;
          });
          if (isNew) {
            lbList.push(feature["LB"]);
            lb = feature["LB"];
          }
        }
      });
      let countList = [];
      lbList.forEach((lb) => {
        let count = 0;
        features.forEach((feature) => {
          if (lb === feature["LB"]) count += 1;
        });
        countList.push(count);
      });
      //   console.log(lbList, countList);
      for (let i = 0; i < lbList.length; i += 1) {
        if (lbList[i] != null) {
          list.children.push({
            key: lbList[i],
            value: countList[i],
          });
        }
      }
      //   console.log(list);
      proxy.dataList.push(list);
    }

    //点击事件
    function click() {
      // 设施场所表隐藏
      pubsub.publish("facilityShowControll", false);
      // 节点元素筛选
      if (Array.from(event.target.parentNode.children).length === 3) {
        let node = Array.from(event.target.parentNode.children)[1];
        // 样式变化
        Array.from(document.querySelectorAll(".generalBox>.key")).forEach(
          (element) => {
            element.style["color"] = "white";
          }
        );
        node.style["color"] = "#f4ea2a";
        // 获取设施场所类别名称
        let facility = node.innerHTML;
        // console.log(facility);
        // 获取此类别设施场所的数据
        let list = [];
        proxy.data.forEach((element) => {
          element.forEach((e) => {
            if (e.LB === facility) list.push(e);
          });
        });
        // 设施场所数据传输
        pubsub.publish("facilityTable", list);
        // 设施场所表显示
        pubsub.publish("facilityTableShow", true);
      }
    }

    return { click };
  },
};
</script>

<style lang="less" scoped>
.bigBox {
  > p {
    margin: 3%;
    font-size: 120%;
    font-weight: bold;
    padding: 1% 5%;
    border-radius: 3px;
    //   background-color: #1296db;
    background-image: ~"url(@{app-images-root}/button_bg6.png)";
    background-size: 100% 100%;
    color: white;
  }
}

.title {
  background-image: ~"url(@{app-images-root}/button_bg2.png)";
  background-size: 100% 100%;
  height: 5%;
  font-size: 170%;
  font-weight: bold;
  text-align: center;
  padding-top: 3%;
  margin-left: -3%;
  color: white;
  margin-bottom: 2%;
}

.generalBox {
  display: inline-block;
  width: 47%;
  margin: 2% 0%;
  position: relative;
  left: 2%;
  > img {
    width: 15%;
    position: relative;
    margin-bottom: 5%;
  }
  > .value {
    color: #1296db;
    font-size: 150%;
    font-weight: bold;
    margin-left: 6%;
  }
  > .key {
    color: white;
    position: relative;
    left: 3%;
    font-size: 140%;
    font-weight: bold;
  }
}

.generalBox > .key:hover {
  color: #f4ea2a;
}

.key:hover {
  cursor: pointer;
}

.rContainer {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.rContainer::-webkit-scrollbar {
  width: 7px;
}

.rContainer::-webkit-scrollbar-thumb {
  height: 25px;
  border-radius: 15px;
  background: rgb(46, 46, 46);
}

.rContainer::-webkit-scrollbar-track {
  background: transparent;
}
</style>